import Icon from '@/components/Icon';
import { useAppSelector } from '@/store';
import {
  changeArticleCollectAction,
  changeArticleLikingAction,
} from '@/store/action/article';
import { useDispatch } from 'react-redux';
// import { changeArticleCollections, changeArticleLikings } from '@/store/action/article'
import styles from './index.module.scss';

type Props = {
  onShowComment?: () => void;
  onComment?: () => void;
  onShare?: () => void;
  type?: number;
  onCommentReply?: () => void;
};

export default function ArticleFooter({
  onShowComment,
  onShare,
  onComment,
  type,
  onCommentReply,
}: Props) {
  const { detail } = useAppSelector((state) => state.articleList);
  // console.log(23, detail);

  const dispatch = useDispatch();

  // 点赞按钮
  const handleLike = () => {
    const newAttitude = detail.attitude === -1 ? 1 : -1;
    // 调用action
    dispatch(changeArticleLikingAction(detail.art_id, newAttitude));
  };

  // 收藏按钮
  const onCollected = () => {
    const newCollect = !detail.is_collected;
    // 调用action
    dispatch(changeArticleCollectAction(detail.art_id, newCollect));
  };

  return (
    <div className={styles.root}>
      <div className="comment-footer">
        <div
          className="input-btn"
          onClick={type !== 1 ? onComment : onCommentReply}
          hidden={type === 1}
        >
          <Icon type="iconbianji" />
          <span>{type === 1 ? '抢沙发' : '去评论'}</span>
        </div>

        <>
          <div
            className="action-item"
            onClick={onShowComment}
            hidden={type === 1}
          >
            <Icon type="iconbtn_comment" />
            <p>评论</p>
            <span className="bage">{detail.comm_count || 0}</span>
          </div>
          {/* 'iconbtn_like2' */}
          <div className="action-item" hidden={type === 1} onClick={handleLike}>
            <Icon
              type={
                detail?.attitude === 1 ? 'iconbtn_like_sel' : 'iconbtn_like2'
              }
            />
            <p>点赞</p>
          </div>
        </>
        <div className="action-item" onClick={onCollected}>
          {/* 'iconbtn_collect' */}
          <Icon
            type={
              detail.is_collected ? 'iconbtn_collect_sel' : 'iconbtn_collect'
            }
          />
          <p>收藏</p>
        </div>
        <div className="action-item" onClick={onShare}>
          <Icon type="iconbtn_share" />
          <p>分享</p>
        </div>
      </div>
    </div>
  );
}
